<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>奔驰</title>
    <meta name="HandheldFriendly" content="True"/>
    <meta name="MobileOptimized" content="320"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="apple-touch-icon-precomposed" href="img/logo.png"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="lib/swiper.min.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/cover.css"/>
    <link rel="stylesheet" href="css/second.css"/>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide cover" data-hash="cover">
            <section>
                <div class="cover-top"></div>
                <div class="cover-contain">
                    <div class="cover-title">
                        <img src="img/cover/slogon.png">
                    </div>
                    <div class="cover-center">
                        <img src="img/cover/car.png" id="J-carImage">

                        <div id="J-videoCell" class="cover-video fn-hide">

                        </div>
                    </div>
                    <div class="cover-bottom" id="J-enterBtn"><img src="img/cover/btn.png"></div>
                </div>
                <div class="light"></div>
                <div class="mask" id="J-coverMask"></div>
            </section>
        </div>

        <div class="swiper-slide catering" data-hash="catering">
            <div class="videoNext"></div>
            <a href="choice.html" class="compare" target="_self"><img src="img/compare_btn.jpg"></a>
        </div>
    </div>
    <div class="arrow"></div>
</div>

<div class="loading">
    <div id="loading-sheep" >
        <div class="loading-state-0"></div>
        <div class="loading-state-1"></div>
        <span id="loading-percent">0%</span>
    </div>
</div>

<div class="fn-hide">
    <img src="img/arrow_light.png">
    <img src="img/before-ending-arrow.png">
    <img src="img/bg.png">
    <img src="img/buy_online.png">
    <img src="img/circle.png">
    <img src="img/close.png">
    <img src="img/close2.png">
    <img src="img/compare.jpg">
    <img src="img/compare_btn.jpg">
    <img src="img/dialog.png">
    <img src="img/fenqi.png">
    <img src="img/footerClose.png">
    <img src="img/headimg.png">
    <img src="img/home.png">
    <img src="img/home-bg.png">
    <img src="img/homepage.png">
    <img src="img/icon_no.png">
    <img src="img/icon_ok.png">
    <img src="img/iris.jpg">
    <img src="img/kefu1.png">
    <img src="img/logo.png">
    <img src="img/menu2.png">
    <img src="img/Menu3.png">
    <img src="img/Menu4.png">
    <img src="img/Menu5.png">
    <img src="img/Menu6.png">
    <img src="img/Menu7.png">
    <img src="img/My-Mercedes.png">
    <img src="img/nav.png">
    <img src="img/cars/car2_01.png">
    <img src="img/cars/car2_02.png">
    <img src="img/cars/car2_03.png">
    <img src="img/cars/car2_04.png">
    <img src="img/cars/car2_05.png">
    <img src="img/cars/car2_06.png">
    <img src="img/car/car1.png">
    <img src="img/car/car2.png">
    <img src="img/car/car3.png">
    <img src="img/cover/1.png">
    <img src="img/cover/2.png">
    <img src="img/cover/3.png">
    <img src="img/cover/4.png">
    <img src="img/cover/5.png">
    <img src="img/cover/6.png">
    <img src="img/cover/bg.jpg">
    <img src="img/cover/btn.png">
    <img src="img/cover/car.png">
    <img src="img/cover/light.png">
    <img src="img/cover/logo.png">
    <img src="img/cover/menu_btn.png">
    <img src="img/cover/slogon.png">
    <img src="img/02.mp4">
</div>

<script src="lib/zepto.min.js"></script>
<script src="lib/swiper.min.js"></script>
<script src="lib/imagesloaded.pkgd.min.js"></script>
<script src="js/imgLoading.js"></script>
<script src="js/animationRender.js"></script>

<script>
    var currentPage = 'cover';
    var swiper = null;
    ImgLoading.start();
    initSwiper();

    function initSwiper() {

        swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            spaceBetween: 0,
            hashnav: true,
            noSwipingClass: 'stop-swiping',
            resistanceRatio: 0,
            paginationBulletRender: function (index, className) {

            },
            onInit: function (swiper) {
                var index = swiper.activeIndex,
                        slideName = getSlideName(swiper.activeIndex);

                ImgLoading.done('img',function(){
                    setTimeout(function(){
                        animationRender.add(slideName);
                    }, 500)
                });
                currentPage = slideName;
            },
            onSlideChangeStart: function (swiper) {
                window.changeStart = true;
            },
            onTransitionEnd: function (swiper) {
                var index = swiper.activeIndex;
                var slideName = getSlideName(index);

                if (typeof(window.changeStart) !== 'undefined' && window.changeStart) {
                    animationRender.remove(getSlideName(swiper.previousIndex));
                    animationRender.add(slideName);
                    window.changeStart = false;
                }

                currentPage = slideName;
            }
        });

    }

    function getSlideName(slideIndex) {
        return $('.swiper-slide').eq(slideIndex).attr('data-hash');
    }

    setTimeout(function () {
        $('#J-coverMask').hide();
    }, 6000);

    swiper && swiper.lockSwipeToPrev();
    swiper && swiper.lockSwipeToNext();

    $('#J-enterBtn').on('click', function () {
        $('.light').animate({opacity: 0}, 300);
        $(this).css({visibility: "hidden"});
        $('.cover-title').css({visibility: "hidden"});
        var i = 1;
        var timer = setInterval(function () {
            i++;
            $('.cover-center img').attr('src', 'img/cover/' + i + '.png');
            if (i == 6) {
                $('.cover-center').animate({right: "-100%"}, 1000, 'ease-in', function () {
                    $('#J-carImage').css({visibility: "hidden"});
                    var videoCell = $('#J-videoCell');
                    videoCell.html('<video id="J-video" x-webkit-airplay="true" webkit-playsinline="true"><source src="img/02.mp4"></video>')
                    var video = $('#J-video');
                    videoCell.show();

                    $('.cover-center').css({
                        right: "inherit",
                        left: "-100%"
                    }).animate({left: 0}, 300, 'ease-out', function () {
                        video[0].play();
                        video.on('ended', function () {
                            swiper && swiper.unlockSwipeToNext();
                            swiper && swiper.slideNext();
                            return !1;
                        }).on('play', function () {
                        }).on("touchmove", function () {
                            return !1;
                        });
                    });

                });
                clearInterval(timer);
            }
        }, 120);
    });
</script>
</body>
</html>